<template>
  <div class="visualarea">
    <el-form label-position="right" label-width="100px">
      <el-form-item label="垂直视场角度">
        <el-slider
          :max="90"
          @change="changeVerticalView"
          v-model="verticalViewAngle"
        ></el-slider>
      </el-form-item>
      <el-form-item label="水平视场角度">
        <el-slider
          :max="120"
          @change="changeHorizontalView"
          v-model="horizontalViewAngle"
        ></el-slider>
      </el-form-item>
      <el-form-item label="观察者高度">
        <el-input v-model="observerHeight">
          <template slot="suffix">米</template>
        </el-input>
      </el-form-item>
      <div class="panel_operate">
        <div @click="drawArea">绘制区域</div>
        <div @click="clear">清除</div>
        <div @click="exit">退出</div>
      </div>
    </el-form>
  </div>
</template>

<script>
/* eslint-disable */
let viewShed = undefined;
import ViewShed from "../views//util/ViewshedAnalysis.js";
export default {
  data() {
    return {
      observerHeight: 0,
      verticalViewAngle: 60,
      horizontalViewAngle: 90,
      // viewShed: null
    };
  },
  methods: {
    changeObserverHeight() {},
    changeHorizontalView(val) {
      if (!viewShed) return;
      viewShed.horizontalViewAngle = val;
      viewShed.add();
    },
    changeVerticalView(val) {
      if (!viewShed) return;
      viewShed.verticalViewAngle = 90 - val;
      viewShed.add();
    },
    drawArea() {
      viewShed = new ViewShed(viewer, {
        observerHeight: this.observerHeight,
        horizontalViewAngle: this.horizontalViewAngle,
        verticalViewAngle: 90 - this.verticalViewAngle,
      });
      // let i = 0;
      // var endPosition = null;
      // var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      // handler.setInputAction(movement => {
      //   i++;
      //   if (i === 1) {
      //     var startPosition = viewer.scene.pickPosition(movement.position); //鼠标点击一次获取开始坐标
      //     let startPosition_wgs = Cesium.Cartographic.fromCartesian(
      //       startPosition
      //     );
      //     startPosition_wgs.height += Number(this.observerHeight);
      //     let startPosition_tran = Cesium.Cartesian3.fromDegrees(
      //       Cesium.Math.toDegrees(startPosition_wgs.longitude),
      //       Cesium.Math.toDegrees(startPosition_wgs.latitude),
      //       startPosition_wgs.height
      //     );
      //     console.log("转换前后坐标坐标", startPosition, startPosition_tran);
      //     if (!startPosition) return;
      //     viewShed = new ViewShed(viewer, {
      //       viewPosition: startPosition_tran,
      //       viewPositionEnd: startPosition,
      //       horizontalViewAngle: this.horizontalViewAngle,
      //       verticalViewAngle:90- this.verticalViewAngle
      //     });
      //     // 鼠标移动的事件
      //     handler.setInputAction(movement => {
      //       endPosition = viewer.scene.pickPosition(movement.endPosition);
      //       if (!endPosition) return;
      //       viewShed.updatePosition(endPosition);
      //       // viewShed.add();
      //       viewShed.createLightCamera();
      //       viewShed.createShadowMap();
      //       viewShed.createPostStage();
      //       if (!viewShed.sketch) {
      //         console.log("jsdefghuih=====", viewShed.sketch);
      //         viewShed.drawSketch();
      //       }
      //     }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
      //   }
      //   // 鼠标点击两次获取结束坐标
      //   if (i === 2) {
      //     i = 0;
      //     endPosition = viewer.scene.pickPosition(movement.position);
      //     viewShed.updatePosition(endPosition);
      //     viewShed.update();
      //     handler && handler.destroy(); //销毁鼠标事件
      //     console.log("销毁后", handler);
      //     // store.setSelected(null);
      //   }
      // }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
    clear() {
      viewShed?.clear();
      viewShed = null;
    },
    exit() {
      this.clear();
      this.$parent.visualAreaVisible = false;
    },
  },
};
</script>

<style scoped lang="less">
.visualarea {
  width: 400px;
  height: 250px;
  background: #fff;
  border-radius: 5px;
  padding: 15px 22px;
  position: absolute;
  bottom: 3vh;
  left: 5vw;
  box-sizing: border-box;
  .panel_operate {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    div {
      background: #3aa6f4;
      border-radius: 4px 4px 4px 4px;
      padding: 9px 16px;
      font-size: 14px;
      cursor: pointer;
      color: #ffffff;
    }
  }
}
</style>
